<template>
  <el-container>
    <Header></Header>
    <el-main>
      <el-card class="box-card">
        <el-row>
          <el-col :span="24"
            ><div class="grid-content">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="textarea"
              >
              </el-input></div
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <!--图片上传-->
        <el-row>
          <el-col :span="24"
            ><div>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog></div
          ></el-col>
        </el-row>
        <el-row class="tel">
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">联系方式：</div></el-col
          >
        </el-row>
        <el-row class="tel"> 
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <el-input
                v-model="telNum"
                placeholder="请留下你的联系方法"
              ></el-input></div
          ></el-col>
        </el-row>
        <el-row class="tel" style="text-align: center">
          <el-col :span="24"
            ><div class="grid-content bg-purple-light">
              <el-button type="primary" @click="subBtn">提交</el-button>
            </div></el-col
          >
        </el-row>
      </el-card>
    </el-main>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
import Footer from "@/components/Footer";
import Header from "@/components/Header";
export default {
  name: "Parking",
  components: { Header, Footer },
  data() {
    return {
      textarea:'',
      dialogImageUrl: "",
      dialogVisible: false,
      telNum:'',
    };
  },
  methods: {
    //上传图片方法
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //提交按钮
    subBtn(){

    }
  },
};
</script>

<style scoped>
.el-container {
  width: 400px;
  height: 600px;
  border: 1px solid black;
  margin: auto;
  background-color: #ffffff;
}
.el-card {
  border-radius: 20px;
}
.tel {
  margin-top: 5px;
}
</style>